<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>105testCallback_1</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<style type="text/css">
body{
	padding-left: 20px;
	background: #eee;
}
.main {
	width: 780px;
	background: #fff;
	margin-left: auto;
	margin-right: auto;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
}
.btngroup {
	width: 20%;
	float: left;
}
.tplbtn {
	margin: 0 5px 5px 0;
}
.edui-editor {
	border:0 !important;
}
.edui-default{
	border:0 !important;
}
.edui-editor .edui-default{
	border:0 !important;
}
/* edui-editor-toolbarbox edui-default */
.edui-editor-toolbarbox {
	display: none;
}
</style>

    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js?v=111"></script>
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js?v=111"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js?v=111"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/third-party/jquery-1.10.2.min.js"></script>
</head>
<body>
    <h3>105testCallback_1</h3>

	<!-- 
	<h2><input type="button" id="btn02" value="My Iframe打印"></h2>
    <script type="text/plain" id="myEditor" style="width:1024px;height:500px;">
        <p>这里我可以写一些输入提示</p>
    </script>-->
    
<div class="btngroup" id="btngroup">
	<input type="button" id="btn02" value="My Iframe打印">
</div>
<div class="main">
    <script id="myEditor" type="text/plain" style="width:700px;height:800px;margin-left:auto;margin-right:auto;border:0 !important;"></script>
</div>
    
    
    <script type="text/javascript">
    	//TODO: _ctx
    	var _ctx = "${pageContext.request.contextPath}";
    
        // var editor01 = UE.getEditor('myEditor');
        // var ue = UE.getEditor('editor', {toolbars:[[]],wordCount:false,elementPathEnabled:false});
        var editor01 = UE.getEditor('myEditor', {toolbars:[[]],wordCount:false,elementPathEnabled:false});
        
        /*
    	 * funcLoadTpl
    	 * 被按钮调用,用来加载模板
    	 */
    	var funcLoadTpl = function(tplName, id){
    		if(tplName){
    			$('#'+id).attr('disabled', 'disabled');
    			$('#btngroup').css("display","none");
    			$.ajax({
        			type: 'POST',
        			url: _ctx + '/my/fetchOneTplByName',
        			data: {"tplName": tplName},
        			success: function(_data){
        				if(_data){
        					var isAppendTo = false;
        					// 插入内容前,先清空编辑器
        					UE.getEditor('myEditor').setContent('', isAppendTo);
        					UE.getEditor('myEditor').execCommand('insertHtml', _data);
        				}
        				
        				// 解开按钮的限制
        				$('#'+id).removeAttr('disabled');
        				$('#btngroup').css("display","block");
        			},
        			error: function(_data){
        				console.log(_data);
        				$('#'+id).removeAttr('disabled');
        				$('#btngroup').css("display","block");
        			}
        		});
    		}
    	};
        
    	/**
    	 * iframe 加载完成后,调用这个方法
    	 */
    	function insideOnloadInvoke(win){
    		alert(11);
    		win.print();
    	}
    	
		$(function(){
			var btn02 = $('#btn02');
			
			// 打印功能的实现
			btn02.on('click', function(){
				console.log( editor01 );
				
				var UE_html = editor01.getAllHtml();
				// console.log( UE_html );
				// return false;
				
				var $ifr_00 = $('#ifr_00');
				if($ifr_00[0]){
					$ifr_00.remove();
				}
				
				var tplIfr = '<iframe id="ifr_00" style="width:0;height:0;padding:0;margin:0;position:absolute;left;0;top:0;"></iframe>';
				$('body').append( tplIfr );
				
				setTimeout(function(){
					$ifr_00 = $('#ifr_00');
					if($ifr_00[0]){
						//TODO: doPrint
						var doPrint = function(mycss, header, footer){
							var _ifr = $ifr_00[0];
							var _doc = _ifr.contentWindow.document;
							
							_doc.open();
							_doc.write('<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><title></title>');
							
							// 从iframe中抽取样式"style"
							// _doc.write( $('style', document)[0].outerHTML );
							var heads = $('*', editor01.iframe.contentWindow.document.head);
							$.each(heads, function(i,n){
								_doc.write( $(n)[0].outerHTML );
								// console.log( $(n)[0].outerHTML );
							});
							
							// 写入我自己的样式, 也可以将样式定义在"iframe.oneEditorPrint.css"
							_doc.write('<style id="emr_style_001">');
							_doc.write(mycss);
							_doc.write('</style>');
							
							_doc.write('</head><body>');
							
							// -- emr_head --
							_doc.write(header);
							// -- emr_main {Begin}--
							// _doc.write('<div style="height:942px;width:668px;margin:0;padding:0;overflow:hidden;" class="emr_main">');
							
							// 从iframe中抽取"body"中的元素
							var bodys = $('*', editor01.iframe.contentWindow.document.body);
							$.each(bodys, function(i,n){
								if( $(n).css('display') == 'block' || $(n).css('display') == 'table' ){
									_doc.write( $(n)[0].outerHTML );
								}
							});
							
							//_doc.write('</div>');
							// -- emr_main {End}--
							
							// -- emr_foot --
							_doc.write(footer);
							
							//var me_win = window;
							//parent.window.insideOnloadInvoke(me_win);
							_doc.write( '<script type="text\/javascript">window.onload=function(){var me_win = window; parent.window.insideOnloadInvoke(me_win);};<\/script>' );
							_doc.write('</body></html>');
							
							_doc.close();
							
						};
						/*
						 * http://www.w3school.com.cn/jsref/jsref_obj_date.asp
						 * "JavaScript Date 对象"文档
						 */
						$.get(_ctx+'/emr1/css/my.css?t='+(new Date().getTime()), function(mycss){
							$.get(_ctx+'/emr1/html/header.html?t='+(new Date().getTime()), function(header){
								$.get(_ctx+'/emr1/html/footer.html?t='+(new Date().getTime()), function(footer){
									doPrint(mycss, header, footer);
								});
							});
						});
						
					}
				},1);
			});
			
			// 创建按钮组: 载入模板
			$.ajax({
				type: 'POST',
				url: _ctx + '/my/fetchAllTpls',
				data: {},
				success: function(_data){
					if(_data){
						//TODO: 
						var tpl = "<option value='{1}'>{1}</option>";
						var btnTpl = '<input class="tplbtn" type="button" id="{1}" value="{2}">';
						$.each(_data, function(i,n){
							var btn = btnTpl.replace(/\{1\}/g, 'tplbtn_'+i).replace(/\{2\}/g, n);
							$(btn).appendTo( $('#btngroup') );
							$('#tplbtn_'+i).on('click', function(){
								funcLoadTpl(n, 'tplbtn_'+i);
							});
						});
					}
				},
				error: function(_data){
					console.log(_data);
				}
			});
			
			
		});
    </script>

</body>
</html>